<template>
    <el-card style="width: 100%" header="个人信息">
        <p>
            您好，{{ username }} 欢迎来到 51Newland.cn！
            <span style="float: right; font-size: 14px">上次登录时间：2020-11-24 15:12:35</span>
        </p>

        <p>等级: {{ memberLevelName }}</p>
        <p>您在本站所有订单有：{{ buyCount }}个 查看</p>
        <p>您的收藏夹共有商品：{{ luckeyCount }}个 查看收藏</p>
        <p class="pt10"></p>
        <p class="gap" style="text-align: right">用户提醒： 您最近30天内提交了11个订单</p>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form label-width="120px" size="small">
                    <el-form-item label="出生日期：">
                        <el-date-picker v-model="birthday" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"> </el-date-picker>
                    </el-form-item>
                    <el-form-item label="性　别：">
                        <el-radio v-model="gender" :label="1">男</el-radio>
                        <el-radio v-model="gender" :label="2">女</el-radio>
                        <el-radio v-model="gender" :label="0">未知</el-radio>
                    </el-form-item>
                    <el-form-item label="电子邮件地址："><el-input v-model="email"></el-input></el-form-item>
                    <el-form-item label="QQ："><el-input v-model="qq"></el-input></el-form-item>
                    <el-form-item label="MSN："><el-input v-model="msn"></el-input></el-form-item>
                    <el-form-item label="办公电话："><el-input v-model="officeTel"></el-input></el-form-item>
                    <el-form-item label="家庭电话："><el-input v-model="homeTel"></el-input></el-form-item>
                    <el-form-item label="手机："> <el-input v-model="phone"></el-input></el-form-item>
                    <el-form-item>
                        <el-button @click="updateProfile">更新用户信息</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="12">
                <el-form label-width="120px">
                    <el-form-item label="原密码："><el-input type="password" v-model="password"></el-input></el-form-item>
                    <el-form-item label="新密码："><el-input type="password" v-model="newpassword"></el-input></el-form-item>
                    <el-form-item label="确认密码："><el-input type="password" v-model="confimpassword"></el-input></el-form-item>
                    <el-form-item>
                        <el-button @click="changePassWord">修改密码</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </el-card>
</template>

<script>
export default {
    data() {
        return {
            password: '',
            newpassword: '',
            confimpassword: '',
            phone: '',
            email: '',
            qq: '',
            msn: '',
            birthday: '',
            officeTel: '',
            homeTel: '',
            gender: '',
            username: '',
            memberLevelName: '',
            buyCount: '',
            luckeyCount: ''
        };
    },
    created() {
        this.getUserInfo();
    },
    methods: {
        getUserInfo() {
            this.$http.get('/api/member/userInfo').then((res) => {
                console.log(res);
                let { phone, email, qq, username, msn, birthday, luckeyCount, buyCount, officeTel, homeTel, gender, memberLevelName } = res;
                this.phone = phone;
                this.email = email;
                this.qq = qq;
                this.msn = msn;
                this.birthday = new Date(birthday) || new Date();
                this.officeTel = officeTel;
                this.homeTel = homeTel;
                this.gender = gender;
                this.username = username;
                this.memberLevelName = memberLevelName;
                this.luckeyCount = luckeyCount || 0;
                this.buyCount = buyCount || 0;
            });
        },
        updateProfile() {
            this.$http
                .post('/api/member/update', {
                    phone: this.phone, //'15618741188',
                    email: this.email, // '516336514@qq.com',
                    qq: this.qq, //'516336514',
                    msn: this.msn,
                    birthday: this.birthday, //'1987-12-23',
                    officeTel: this.officeTel, //'021-68860235',
                    homeTel: this.homeTel, //'021-68860235',
                    gender: this.gender //'1' //性别：0->未知；1->男；2->女
                })
                .then((res) => {
                    this.$message.success(res);
                });
        },
        changePassWord() {
            if (this.password == this.newpassword) {
                return this.$message.error('新密码与原密码相同');
            }
            if (this.confimpassword !== this.newpassword) {
                return this.$message.error('两次输入的密码不相同');
            }
            this.$http
                .post('/api/member/updatePwd', {
                    password: this.password,
                    newpassword: this.newpassword,
                    confimpassword: this.confimpassword
                })
                .then((res) => {
                    this.$message.success(res);
                    this.password = '';
                    this.newpassword = '';
                    this.confimpassword = '';
                });
        }
    }
};
</script>

<style scoped>
p {
    font-size: 18px;
    margin: 10px 0;
}
.pt10 {
    padding-top: 10px;
}
.gap {
    padding: 20px 0 0;
    border-top: 1px solid #e6e6e6;
}
</style>
